<template>
	<div class="mchart">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="color: #FEC418;">图表数据分析</span>
				<div style="float: right; color: lightgray;">更新时间：{{nowTime}}</div>
			</div>
			<div class="card-content">
				<div class="mainbox">
					<div class="column">
						<div class="panel bar">
							<h2>评论数分析</h2>
							<div class="chart"></div>
							<div class="panel-footer"></div>
						</div>
						<div class="panel line">
							<h2>平均消费均价分析</h2>
							<div class="chart"></div>
							<div class="panel-footer"></div>
						</div>
						<div class="panel pie">
							<h2>店铺数量分析	</h2>
							<div class="chart"></div>
							<div class="panel-footer"></div>
						</div>
					</div>
					<div class="column">
						<div class="panel bar1">
							<h2>精选套餐数量分析</h2>
							<div class="chart"></div>
							<div class="panel-footer"></div>
						</div>
						<div class="panel line1">
							<h2>星级评分分析</h2>
							<div class="chart"></div>
							<div class="panel-footer"></div>
						</div>
						<div class="panel pie1">
							<h2>广告标识商家数量分析</h2>
							<div class="chart"></div>
							<div class="panel-footer"></div>
						</div>
					</div>
				</div>
			</div>
		</el-card>
	</div>
</template>

<script>
import echarts from 'echarts';
import { getDate, getNow} from '../utils/times.js';
export default {
	data() {
		return {
			nowTime: ""
		}
	},
	methods: {
		async initCharts() {
			const id = this.$route.query.Id;
			const Province = this.$route.query.Province;
			const City = this.$route.query.City;
			// 评论数分析
			if (id != null && Province && City) {
				const res = await this.$https.postXform('GetEvalutionInfo?DataId=' + id);
				const data = res.data.Data;
				let ydata = [];
				let data1 = [];
				let data2 = [];
				if (Province == City) {
					ydata = ['全国', Province, '本店'];
					data1 = [
						{name: '全国', value: data.CurrentCountryMonthEvalutionCount}, 
					    {name: Province, value: data.CurrentProvinceMonthEvalutionCount},
						{name: '本店', value: data.CurrentStoreMonthEvalutionCount}
					];
					data2 = [
						{name: '全国', value: data.PreviousWeekCountryStoreCount},
						{name: Province, value: data.PreviousWeekProvinceStoreCount},
						{name: '本店', value: data.PreviousStoreMonthEvalutionCount}
					];
				} else {
					ydata = ['全国', Province, City, '本店'];
				    data1 = [
						{name: '全国', value: data.CurrentCountryMonthEvalutionCount}, 
					    {name: Province, value: data.CurrentProvinceMonthEvalutionCount},
					    {name: City, value: data.CurrentCityMonthEvalutionCount},
						{name: '本店', value: data.CurrentStoreMonthEvalutionCount}
					];
					data2 = [
						{name: '全国', value: data.PreviousCountryMonthEvalutionCount},
						{name: Province, value: data.PreviousProvinceMonthEvalutionCount},
						{name: City, value: data.PreviousCityMonthEvalutionCount},
						{name: '本店', value: data.PreviousStoreMonthEvalutionCount}
					];
				}
				var chart = echarts.init(document.querySelector('.bar .chart'));
				(function() {
					var option = {
						color: ['#2f89cf', '#ff55ff'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							left: '0%',
							right: '0%',
							top: '10px',
							bottom: '4%',
							containLabel: true
						},
						xAxis: [
							{
								type: 'category',
								data: ydata,
								axisTick: {
									alignWithLabel: true
								},
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: false
								}
							}
						],
						yAxis: [
							{
								type: 'value',
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								},
								splitLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								}
							}
						],
						series: [
							{
								name: '评论数',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data1
							},
							{
								name: '评论数',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data2
							}
						]
					};
					chart.setOption(option);
					window.addEventListener('resize', function() {
						chart.resize();
					});
				})();
			}
			//精选套餐数量分析
			if (id != null && Province && City) {
				const res = await this.$https.postXform('GetComboInfo?DataId=' + id);
				const data = res.data.Data;
				let ydata = [];
				let data1 = [];
				let data2 = [];
				if (Province == City) {
					ydata = ['全国', Province, '本店'];
					data1 = [
						{name: '全国', value: data.CurrentCountryMonthComboInfoCount},
						{name: Province, value: data.CurrentProvinceMonthComboInfoCount},
						{name: '本店', value: data.CurrentStoreMonthComboInfoCount}
					];
					data2 = [
						{name: '全国', value: data.PreviousCountryMonthComboInfoCount},
						{name: Province, value: data.PreviousProvinceMonthComboInfoCount},
						{name: '本店', value: data.PreviousStoreMonthComboInfoCount}
					];
				} else {
					ydata = ['全国', Province, City, '本店'];
				    data1 = [
						{name: '全国', value: data.CurrentCountryMonthComboInfoCount}, 
					    {name: Province, value: data.CurrentProvinceMonthComboInfoCount},
					    {name: City, value: data.CurrentCityMonthComboInfoCount},
						{name: '本店', value: data.CurrentStoreMonthComboInfoCount}
					];
					data2 = [
						{name: '全国', value: data.PreviousCountryMonthComboInfoCount},
						{name: Province, value: data.PreviousProvinceMonthComboInfoCount},
						{name: City, value: data.PreviousCityMonthComboInfoCount},
						{name: '本店', value: data.PreviousStoreMonthComboInfoCount}
					];
				}
				var chart = echarts.init(document.querySelector('.bar1 .chart'));
				(function() {
					var option = {
						color: ['#2f89cf', '#ff55ff'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							left: '0%',
							right: '0%',
							top: '10px',
							bottom: '4%',
							containLabel: true
						},
						xAxis: [
							{
								type: 'category',
								data: ydata,
								axisTick: {
									alignWithLabel: true
								},
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: false
								}
							}
						],
						yAxis: [
							{
								type: 'value',
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								},
								splitLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								}
							}
						],
						series: [
							{
								name: '本周数量',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data1
							},
							{
								name: '上周数量',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data2
							}
						]
					};
					chart.setOption(option);
					window.addEventListener('resize', function() {
						chart.resize();
					});
				})();
			}
			// 星级评分分析
			if (id != null && Province && City) {
				const res = await this.$https.postXform('GetStoreGradeInfo?DataId=' + id);
				const data = res.data.Data;
				let ydata = [];
				let data1 = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				if (Province == City) {
					ydata = ['全国', Province, '本店'];
					data1 = [
						{name: '全国', value: data.CurrentCountryStoreGrade},
						{name: Province, value: data.CurrentProvinceStoreGrade},
						{name: '本店', value: data.CurrentStoreStoreGrade}
					];
					data2 = [
						{name: '全国', value: data.Previous1CountryStoreGrade},
						{name: Province, value: data.Previous1ProvinceStoreGrade},
						{name: '本店', value: data.Previous1StoreStoreGrade}
					];
					data3 = [
						{name: '全国', value: data.Previous2CountryStoreGrade},
						{name: Province, value: data.Previous2ProvinceStoreGrade},
						{name: '本店', value: data.Previous2StoreStoreGrade}
					];
					data4 = [
						{name: '全国', value: data.Previous3CountryStoreGrade},
						{name: Province, value: data.Previous3ProvinceStoreGrade},
						{name: '本店', value: data.Previous3StoreStoreGrade}
					];
				} else {
					ydata = ['全国', Province, City, '本店'];
				    data1 = [
						{name: '全国', value: data.CurrentCountryStoreGrade}, 
					    {name: Province, value: data.CurrentProvinceStoreGrade},
					    {name: City, value: data.CurrentCityStoreGrade},
						{name: '本店', value: data.CurrentStoreStoreGrade}
					];
					data2 = [
						{name: '全国', value: data.Previous1CountryStoreGrade},
						{name: Province, value: data.Previous1ProvinceStoreGrade},
						{name: City, value: data.Previous1CityStoreGrade},
						{name: '本店', value: data.Previous1StoreStoreGrade}
					];
					data3 = [
						{name: '全国', value: data.Previous2CountryStoreGrade},
						{name: Province, value: data.Previous2ProvinceStoreGrade},
						{name: City, value: data.Previous2CityStoreGrade},
						{name: '本店', value: data.Previous2StoreStoreGrade}
					];
					data4 = [
						{name: '全国', value: data.Previous3CountryStoreGrade},
						{name: Province, value: data.Previous3ProvinceStoreGrade},
						{name: City, value: data.Previous3CityStoreGrade},
						{name: '本店', value: data.Previous3StoreStoreGrade}
					];
				}
				var chart = echarts.init(document.querySelector('.line1 .chart'));
				(function() {
					var option = {
						color: ['#2f89cf', '#ff55ff', '#ffff55', '#55ffff'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							left: '0%',
							right: '0%',
							top: '10px',
							bottom: '4%',
							containLabel: true
						},
						xAxis: [
							{
								type: 'category',
								data: ydata,
								axisTick: {
									alignWithLabel: true
								},
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: false
								}
							}
						],
						yAxis: [
							{
								type: 'value',
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								},
								splitLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								}
							}
						],
						series: [
							{
								name: '本月星级评分',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data1
							},
							{
								name: '六月星级评分',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data2
							},
							{
								name: '七月星级评分',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data3
							},
							{
								name: '八月星级评分',
								type: 'bar',
								barWidth: '20%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data4
							}
						]
					};
					chart.setOption(option);
					window.addEventListener('resize', function() {
						chart.resize();
					});
				})();
			}
			// 平均消费均价分析
			if (id != null && Province && City) {
				const res = await this.$https.postXform('GetAverageConsumptionInfo?DataId=' + id);
				const data = res.data.Data;
				let xdata = ['本月消费', '六月消费', '七月消费', '八月消费'];
				let data1 = [];
				let data2 = [];
				let data3 = [];
				let data4 = [];
				if (Province == City) {
					data1 = [
						{name: '本店', value: data.CurrentStoreAverageConsumption},
						{name: '本店', value: data.Previous1StoreAverageConsumption},
						{name: '本店', value: data.Previous2StoreAverageConsumption},
						{name: '本店', value: data.Previous3StoreAverageConsumption}
					];
					data2 = [
						{name: '全国', value: data.CurrentCountryAverageConsumption}, 
						{name: '全国', value: data.Previous1CountryAverageConsumption},
						{name: '全国', value: data.Previous2CountryAverageConsumption},
						{name: '全国', value: data.Previous3CountryAverageConsumption}
					];
					data3 = [
						{name: Province, value: data.CurrentProvinceAverageConsumption},
						{name: Province, value: data.Previous1ProvinceAverageConsumption},
						{name: Province, value: data.Previous2ProvinceAverageConsumption},
						{name: Province, value: data.Previous3ProvinceAverageConsumption}
					];
				} else {
					data1 = [
						{name: '本店', value: data.CurrentStoreAverageConsumption},
						{name: '本店', value: data.Previous1StoreAverageConsumption},
						{name: '本店', value: data.Previous2StoreAverageConsumption},
						{name: '本店', value: data.Previous3StoreAverageConsumption}
					];
					data2 = [
						{name: '全国', value: data.CurrentCountryAverageConsumption}, 
						{name: '全国', value: data.Previous1CountryAverageConsumption},
						{name: '全国', value: data.Previous2CountryAverageConsumption},
						{name: '全国', value: data.Previous3CountryAverageConsumption}
					];
					data3 = [
						{name: Province, value: data.CurrentProvinceAverageConsumption},
						{name: Province, value: data.Previous1ProvinceAverageConsumption},
						{name: Province, value: data.Previous2ProvinceAverageConsumption},
						{name: Province, value: data.Previous3ProvinceAverageConsumption}
					];
					data4 = [
						{name: City, value: data.CurrentCityAverageConsumption},
						{name: City, value: data.Previous1CityAverageConsumption},
						{name: City, value: data.Previous2CityAverageConsumption},
						{name: City, value: data.Previous3CityAverageConsumption},
					];
				}
				var chart = echarts.init(document.querySelector('.line .chart'));
				(function() {
					var option = {
						color: ['#2f89cf', '#ff55ff', '#22ff22', '#2222ff'],
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							left: '0%',
							right: '0%',
							top: '10px',
							bottom: '4%',
							containLabel: true
						},
						xAxis: [
							{
								type: 'category',
								data: xdata,
								axisTick: {
									alignWithLabel: true
								},
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: false
								}
							}
						],
						yAxis: [
							{
								type: 'value',
								axisLabel: {
									color: 'rgba(255, 255, 255, .6)',
									fontsize: '12'
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								},
								splitLine: {
									lineStyle: {
										color: 'rgba(255, 255, 255, .2)'
									}
								}
							}
						],
						series: [
							{
								name: '本店',
								type: 'bar',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data1
							},
							{
								name: '全国',
								type: 'bar',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data2
							},
							{
								name: Province,
								type: 'bar',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data3
							},
							{
								name: City,
								type: 'bar',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data4
							},
							{
								name: '本店',
								type: 'line',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data1
							},
							{
								name: '全国',
								type: 'line',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data2
							},
							{
								name: Province,
								type: 'line',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data3
							},
							{
								name: City,
								type: 'line',
								barWidth: '10%',
								itemStyle: {
									barBorderRadius: 5
								},
								data: data4
							}
						]
					};
					chart.setOption(option);
					window.addEventListener('resize', function() {
						chart.resize();
					});
				})();
			}
			// 店铺数量分析
			if (id != null && Province && City) {
				const res = await this.$https.postXform('GetStoreInfo?DataId=' + id);
				const data = res.data.Data;
				let ydata = [];
				let data1 = [];
				let data2 = [];
				if (Province == City) {
					ydata = ['全国', Province];
					data1 = [
						{name: '全国', value: data.CurrentWeekCountryStoreCount}, 
					    {name: Province, value: data.CurrentWeekProvinceStoreCount}
					];
					data2 = [
						{name: '全国', value: data.PreviousWeekCountryStoreCount},
						{name: Province, value: data.PreviousWeekProvinceStoreCount}
					];
				} else {
					ydata = ['全国', Province, City];
				    data1 = [
						{name: '全国', value: data.CurrentWeekCountryStoreCount}, 
					    {name: Province, value: data.CurrentWeekProvinceStoreCount},
					    {name: City, value: data.CurrentWeekCityStoreCount}
					];
					data2 = [
						{name: '全国', value: data.PreviousWeekCountryStoreCount},
						{name: Province, value: data.PreviousWeekProvinceStoreCount},
						{name: City, value: data.PreviousWeekCityStoreCount}
					];
				}
				(function() {
					var option = {
						color: ["#cc66cc", "#66cccc", "#ffffff"],
					    title: [{
					        text: '本周数量',
					        left: '30%',
					        top: '10%',
					        textAlign: 'center',
							textStyle: {
								color: "#fff"
							}
					    }, {
					        text: '上周数量',
					        left: '70%',
					        top: '10%',
					        textAlign: 'center',
							textStyle: {
								color: "#fff"
							}
					    }],
					    tooltip: {
					        trigger: 'item',
					        formatter: '{a} <br/>{b} : {c} ({d}%)'
					    },
					    legend: {
					        orient: 'vertical',
							right: '10',
							bottom: 'center',
					        data: ydata,
							textStyle: {
								color: 'rgba(255, 255, 255, .5)',
								fontSize: '12'
							},
					    },
					    series: [
					        {
					            name: '数据',
					            type: 'pie',
					            radius: '50%',
					            center: ['25%', '50%'],
					            data: data1,
								label: {
								    normal: {
								        formatter: '{c}',
								        position: 'outside'
								    }
								},
					            emphasis: {
					                itemStyle: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 1)'
					                }
					            }
					        },
							{
							    name: '数据',
							    type: 'pie',
							    radius: '50%',
							    center: ['70%', '50%'],
							    data: data2,
							    emphasis: {
							        itemStyle: {
							            shadowBlur: 10,
							            shadowOffsetX: 0,
							            shadowColor: 'rgba(0, 0, 0, 0.5)'
							        }
							    },
								label: {
								    normal: {
								        formatter: '{c}',
								        position: 'outside'
								    }
								},
							}
					    ]
					};
					var chart = echarts.init(document.querySelector('.pie .chart'));
					chart.setOption(option);
					window.addEventListener('resize', function() {
						chart.resize();
					});
				})();
				// 广告标识商家数量分析
				if (id != null && Province && City) {
					const res = await this.$https.postXform('GetAdvertiseInfo?DataId=' + id);
					const data = res.data.Data;
					let ydata = [];
					let data1 = [];
					let data2 = [];
					if (Province == City) {
						ydata = ['全国', Province, '本店'];
						data1 = [
							{name: '全国', value: data.CurrentWeekCountryAdvertiseCount}, 
						    {name: Province, value: data.CurrentWeekProvinceAdvertiseCount}
							//{name: '本店', value: 0}
						];
						data2 = [
							{name: '全国', value: data.PreviousWeekCountryAdvertiseCount},
							{name: Province, value: data.PreviousWeekProvinceAdvertiseCount}
							//{name: '本店', value: 0}
						];
					} else {
						ydata = ['全国', Province, City, '本店'];
					    data1 = [
							{name: '全国', value: data.CurrentWeekCountryAdvertiseCount}, 
						    {name: Province, value: data.CurrentWeekProvinceAdvertiseCount},
						    {name: City, value: data.CurrentWeekCityAdvertiseCount}
							//{name: '本店', value: 0}
						];
						data2 = [
							{name: '全国', value: data.PreviousWeekCountryAdvertiseCount},
							{name: Province, value: data.PreviousWeekProvinceAdvertiseCount},
							{name: City, value: data.PreviousWeekCityAdvertiseCount}
							//{name: '本店', value: 0}
						];
					}
					(function() {
						var option = {
							color: ["#cc66cc", "#66cccc", "#ffffff", "#cccc66"],
						    title: [{
						        text: '本周广告店铺',
						        left: '30%',
						        top: '10%',
						        textAlign: 'center',
								textStyle: {
									color: "#fff"
								}
						    }, {
						        text: '上周广告店铺',
						        left: '70%',
						        top: '10%',
						        textAlign: 'center',
								textStyle: {
									color: "#fff"
								}
						    }],
						    tooltip: {
						        trigger: 'item',
						        formatter: '{a} <br/>{b} : {c} ({d}%)'
						    },
						    legend: {
						        orient: 'vertical',
								right: '10',
								bottom: 'center',
						        data: ydata,
								textStyle: {
									color: 'rgba(255, 255, 255, .5)',
									fontSize: '12'
								},
						    },
						    series: [
						        {
						            name: '数据',
						            type: 'pie',
						            radius: '50%',
						            center: ['25%', '50%'],
						            data: data1,
									label: {
									    normal: {
									        formatter: '{c}',
									        position: 'outside'
									    }
									},
						            emphasis: {
						                itemStyle: {
						                    shadowBlur: 10,
						                    shadowOffsetX: 0,
						                    shadowColor: 'rgba(0, 0, 0, 1)'
						                }
						            }
						        },
								{
								    name: '数据',
								    type: 'pie',
								    radius: '50%',
								    center: ['70%', '50%'],
								    data: data2,
								    emphasis: {
								        itemStyle: {
								            shadowBlur: 10,
								            shadowOffsetX: 0,
								            shadowColor: 'rgba(0, 0, 0, 0.5)'
								        }
								    },
									label: {
									    normal: {
									        formatter: '{c}',
									        position: 'outside'
									    }
									},
								}
						    ]
						};
						var chart = echarts.init(document.querySelector('.pie1 .chart'));
						chart.setOption(option);
						window.addEventListener('resize', function() {
							chart.resize();
						});
					})();
				}
			}
		}
	},
	created() {
		this.$nextTick(function() {
			this.nowTime = getNow();
			this.initCharts();
		});
	},
	activated() {
		this.$nextTick(function() {
			this.nowTime = getNow();
			this.initCharts();
		});
	}
}
</script>

<style scoped="scoped">
.box-card {
	position: relative;
	margin: 10px;
}
.mainbox {
	position: relative;
	min-width: 1024px;
	max-width: 1920px;
	margin: 0 auto;
	padding: 10px 10px 0;
	/* background: url(../assets/bg.jpg) no-repeat top center; */
	display: flex;
	background-size: cover;
	border-radius: 10px;
}
.column {
	flex: 3;
}
.panel {
	margin: 0 10px 10px;
	position: relative;
	height: 300px;
	padding: 0 15px 40px;
	border: 1px solid rgba(25, 186, 139, 0.2);
	background: url(../assets/line.png);
}
.panel::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	border-left: 2px solid #02a6b5;
	border-top: 2px solid #02a6b5;
}
.panel::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid #02a6b5;
	border-top: 2px solid #02a6b5;
}
.panel-footer {
	position: absolute;
	height: 19.375rem;
	bottom: 0;
	right: 0;
	width: 100%;
}
.panel-footer::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
	border-left: 2px solid #02a6b5;
	border-bottom: 2px solid #02a6b5;
}
.panel-footer::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	border-right: 2px solid #02a6b5;
	border-bottom: 2px solid #02a6b5;
}
h2 {
	height: 48px;
	color: #fff;
	line-height: 48px;
	font-size: 20px;
	text-align: center;
	font-weight: 400;
}
.chart {
	position: absolute;
	width: 100%;
	height: calc(100% - 48px);
	left: 0;
	bottom: 0;
	z-index: 999;
}
</style>
